<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			<z-nav-bar backState="1000" type="transparentFixed">积分商城</z-nav-bar>
		</view>
		<!-- 详情轮播图 -->
		<view v-if="pointSpuInfo">
			<u-swiper :list="pointSpuInfo.bannerImageList" height="500" :autoplay="false"></u-swiper>
		</view>
		
		<!-- 商品信息 -->
		<view style="position: relative; top: -110rpx;" v-if="pointSpuInfo">
			<view class="bg-1 u-p-t-20 u-p-b-20" style="padding-bottom: 0rpx;">
				<view class="u-m-l-70 u-flex">
					<view class="u-flex-8">
						<text class="u-font-30">{{pointSpuInfo.spuTitle}}</text>
					</view>
					<view class="u-flex-4 u-m-l-30 u-text-right u-m-r-30">
						<view>
							<text class="u-font-40 text-bold">{{pointSpuInfo.point}}</text>
							<text class="text-bold">积分</text>
						</view>
						<view class="u-m-t-10 u-font-26" style="opacity: 0.5;">
							<text>价值</text>
							<text class="u-m-l-10">¥</text>
							<text>{{pointSpuInfo.marketPrice | formatMoneyToYuanFilter}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-p-30 ">
				<view class="u-text-center">
					<text class="u-font-38">兑换详情</text>
				</view>
				
				<view class="u-m-t-20">
					<view v-for="(item, index) in pointSpuInfo.detailImageList" :key="index" style="margin-top:-10rpx">
						<image :src="item" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view slot="bottom" >
			<view class="u-p-20 u-flex bg-white" v-if="pointSpuInfo">
				<view class="u-flex-1 u-text-center">
					<button open-type="contact" plain hover-class="none" size="mini" style="border: 0px;">
						<u-icon name="server-fill" size="28"></u-icon>
					</button>
					<view class="u-font-22 u-p-t-5">客服</view>
				</view>
				<view class="u-flex-2 u-flex u-flex-end">
					<u-button text="立即兑换" shape="circle" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}" @click="handleSubmit"></u-button>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {jumpTypeEnum} from '@/common/const.js'
	import {getPointSpuDetail} from '@/api/point.js'
import image from '../../uni_modules/uview-ui/libs/config/props/image'
	
	export default{
		data(){
			return{
				
				id:'',
				pointSpuInfo:null
			}
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.reload()
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			queryList(){
				getPointSpuDetail({
					id: this.id
				}).then(res=>{
					let data = res.data
					let imageList = JSON.parse(data.bannerImages)
					let images = []
					imageList.forEach(item=>{
						images.push(item.materialUrl)
					})
					
					// 获取轮播图
					if(!data.hasOwnProperty('bannerImageList')){
						this.$set(data, 'bannerImageList', images.slice(1))
					} else {
						data.bannerImageList = images.slice(1)
					}
					
					// 还原成图片地址
					data.bannerImages = images.join()
					
					imageList = JSON.parse(data.detailImages)
					images = []
					imageList.forEach(item=>{
						images.push(item.materialUrl)
					})
					
					// 获取sku详情图片
					if(!data.hasOwnProperty('detailImageList')){
						this.$set(data, 'detailImageList', images)
					} else {
						data.detailImageList = images
					}
					// 还原成图片地址
					data.detailImages = images.join()
					
					this.pointSpuInfo = data
					this.$refs.paging.complete([]);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			
			
			/**
			 * 提交
			 */
			handleSubmit(){
				
				// 订单头
				let orderHeader = {
					totalPoint: this.pointSpuInfo.point,
					buyCount: this.pointSpuInfo.count,
					payPoint: this.pointSpuInfo.point,
					details:[]
				}
				orderHeader.details.push(this.pointSpuInfo)
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/points_mall/create?orderHeader=${encodeURIComponent(JSON.stringify(orderHeader))}`, true)
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style scoped>
	.bg-1{
		background-image: linear-gradient(to right, #FFB143, #FFECBF);
		/* height: 300rpx; */
		width: 100%;
		border-radius: 110rpx 0rpx 0rpx 0rpx;
	}
</style>